<template>
	<div class="ServiceArchive">
		<el-form :inline="true" ref="form" :model="form" label-width="80px">
			<div>
				<el-form-item label="客户" style="margin-left: -40px;">
					<el-input v-model="form.clientame"></el-input>
				</el-form-item>
				<el-form-item label="概要">
					<el-input v-model="form.summary"></el-input>
				</el-form-item>
				<el-form-item label="创建日期">
					<el-col :span="24">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button @click="pageshow" plain>搜索</el-button>
					<el-button @click="showAll" plain>显示全部</el-button>
				</el-form-item>
			</div>
		</el-form>
		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
			<el-table-column prop="Number" label="编号" width="60" type="index">
			</el-table-column>
			<el-table-column prop="clientName" label="客户">
			</el-table-column>
			<el-table-column prop="summary" label="概要">
			</el-table-column>
			<el-table-column prop="serviceType" label="服务类型" :filters="opition1" :filter-method="filterTag"
				filter-placement="bottom-end">
			</el-table-column>
			<el-table-column prop="creatName" label="创建人">
			</el-table-column>
			<el-table-column prop="createTime" label="创建日期" width="200">
			</el-table-column>
			<el-table-column prop="stateName" label="状态" width="80" :filters="opition2" :filter-method="filterTag2"
				filter-placement="bottom-end">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="show(scope.$index, scope.row)"
						class="el-icon-folder-opened">归档查看</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="服务归档" :visible.sync="addVisible" width="65%" :modal-append-to-body="false">
			<table id="tableshow" border="0" cols="20" rows="20">
				<tr>
					<th>编号</th>
					<th>{{index+1}}</th>
					<th>服务类型</th>
					<th>{{resdata.serviceType}}</th>
				</tr>
				<tr>
					<th>概要</th>
					<th>{{resdata.summary}}</th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th>客户</th>
					<th>{{resdata.clientName}}</th>
					<th>状态</th>
					<th>{{resdata.stateName}}</th>
				</tr>
				<tr>
					<th>服务请求</th>
					<th>{{resdata.requestService}}</th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th>创建人</th>
					<th>{{resdata.creatName}}</th>
					<th>创建时间</th>
					<th>{{resdata.createTime}}</th>
				</tr>
				<tr>
					<th>分配给</th>
					<th>{{resdata.assignedName}}</th>
					<th>分配时间</th>
					<th>{{resdata.assignedTime}}</th>
				</tr>
				<tr>
					<th>服务处理</th>
					<th>{{resdata.operatorContent}}</th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th>处理人</th>
					<th>{{resdata.handlerName}}</th>
					<th>处理时间</th>
					<th>{{resdata.handlerTime}}</th>
				</tr>
				<tr>
					<th>处理结果</th>
					<th>{{resdata.processResult}}</th>
					<th>满意度</th>
					<th>{{stars}}</th>
				</tr>
			</table>
			<table style="text-align: center;padding-top: 40px;position: relative;margin-left: 43%;">
				<tr>
					<th colspan="2">
						<el-button type="primary" @click="show()" plain>返回</el-button>
					</th>
					<th colspan="2">
						<el-button type="primary" plain>帮助</el-button>
					</th>
				</tr>
			</table>
		</el-dialog>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "ServiceArchive",
		props: ["msg"],
		data() {
			return {
				juese: '',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				addVisible: false,
				opition1: [],
				opition2: [],
				form: {
					clientame: "",
					summary: "",
					servesType: "",
					createTime: "",
					serveState: ""
				},
				index: "",
				stars: "",
				tableData: [],
				resdata: []
			};
		},
		mounted() {
			this.pageshow();
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname;
		},
		methods: {
			filterTag(value, row) {
				return row.serviceType === value;
			},
			filterTag2(value, row) {
				return row.stateName === value;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			showAll() {
				this.form = {};
				this.pageshow();
			},
			pageshow() {
				this.$http
					.get("/serveList/serviceHandle", {
						params: {
							name: this.form.clientame,
							summry: this.form.summary,
							createTime: this.form.createTime,
							from: 4
						}
					})
					.then(response => {
						this.tableData = response.data.data;
					})
				this.$http.get('serveList/getServeType').then(response => {
					this.opition1 = response.data.data;
				}).catch(function (error) {
					console.log(error);
				});

				this.$http.get('/serveList/getServeState').then(response => {
					this.opition2 = response.data.data;
				}).catch(function (error) {
					console.log(error);
				});
			},
			show(index, row) {
				if (row != undefined) {
					this.index = index;
					this.resdata = row;
					var stars = ['☆', '☆☆', '☆☆☆', '☆☆☆☆', '☆☆☆☆☆'];
					this.stars = stars[row.satisfaction - 1];
				}
				if (this.addVisible == false) {
					this.addVisible = true;
				} else {
					this.addVisible = false;
				}
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			}

		}
	};
</script>

<style scoped>
	#tableshow tr th {
		width: 800px;
		height: 40px;
		border-radius: 3px;
	}


	#tableshow tr th:nth-child(1) {
		background: #D3DCE6;
		font-family: "微软雅黑";
	}

	#tableshow tr th:nth-child(3) {
		background: #D3DCE6;
	}

	body {
		font-family: Arial;
		font-size: 14px;
		line-height: 180%;
		padding-top: 20px;
	}

	/*总控制，可忽略此行*/
	#tableshow {
		border-top: 1pt solid #C1DAD7;
		border-left: 1pt solid #C1DAD7;
		margin: 0 auto;
	}

	td {
		padding: 5px 10px;
		text-align: center;
		border-right: 1pt solid #C1DAD7;
		border-bottom: 1pt solid #C1DAD7;
	}



	/* odd 标识奇数行，even标识偶数行 */

	#tableshow {
		border-collapse: collapse;
		font-size: 18px;
	}
</style>